<template>
  <div class="wrapper">
    {{ message }}
    <input type="text" v-model="text" />
  </div>
</template>

<script>
export default {
  name: "HaloWord",
  data() {
    return {
      message: "Hello Vue!",
      text: "",
    };
  },
  // 通过watch监听数据变化，实现数据的动态渲染
  watch: {
    text: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        this.message = `Hello ${newVal}!`;
      },
    },
  },
};
</script>
